<template>
  <van-popup v-model:show="other.show" class="popup-box" style="height: 100%" position="right">
    <div class="page">
      <global-header title="详情" @back="other.show = false">
        <template #right>
          <ActionSelect
            v-model:val="searchParams.type"
            title="选择排序"
            :columns="actions"
            @update="handleSearch"
          >
            <template #default="{ click, actionText }">
              <div class="absolute flex items-center pr-[15px]" @click="click()">
                <span class="text-[14px] mr-[2px] text-[#333333]">{{ actionText }}</span>
                <van-icon name="arrow-down" color="#111111" class="!text-[12px]"></van-icon>
              </div>
            </template>
          </ActionSelect>
        </template>
      </global-header>
      <div class="page-main" ref="scrollRef">
        <div class="bg-white">
          <scroll-list
            enableRefresh
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @refresh="refresh"
            @load="load"
          >
            <template v-for="item in list">
              <BackwaterItemDetailItem
                :item="item"
                :isBack="isBack"
                :uid="uid"
                @update="handleSearch"
              />
            </template>
          </scroll-list>
        </div>
      </div>
      <div class="grid grid-cols-2 gap-x-[10px] py-[10px] px-[15px]" v-if="isBack == '0'">
        <div>
          <van-button block type="danger" @click="handleAction(2)">一键拒绝</van-button>
        </div>
        <div>
          <van-button block type="primary" @click="handleAction(1)">一键通过</van-button>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import { reqUserBackWaterGrant, reqUserBackWaterReject } from "@/api/backwater";
import BackwaterItemDetailItem from "./backwater-item-detail-item.vue";
import { reqReportRebateDetail } from "@/api/report";
import { useList } from "@/hooks/useList";
import { usePremsStore } from "@/store/modules/prems";
import { toast } from "@/utils/toast";

interface Params {
  UserId: number;
  Type?: string;
  IsBack?: "0" | "1";
}

const props = withDefaults(
  defineProps<{
    uid: number;
    isBack?: "0" | "1";
  }>(),
  {}
);

// 排序列表
const actions = ref([
  { text: "全部类型", value: "-1" },
  { text: "后台回水", value: "0" },
  { text: "自助回水", value: "1" }
]);

const other = reactive({
  show: false,
  showPicker: false,
  loading: false
});
const premsStore = usePremsStore();

const searchParams = reactive({
  type: "-1"
});
provide("searchParams", searchParams);

const getParams = () => {
  const params: Params = {
    UserId: props.uid as number,
    IsBack: props.isBack
  };
  if (searchParams.type && searchParams.type != "-1") {
    params.Type = searchParams.type;
  }
  return params;
};

// 获取列表
const { scrollRef, state, list, getData, search, refresh, load } = useList<
  ReportRebateDetailMo,
  Params
>(reqReportRebateDetail, getParams);

const handleSearch = () => {
  nextTick(search);
};

const open = () => {
  other.show = true;
  getData();
};

// 发放/拒绝
const handleAction = (type: 1 | 2 = 1) => {
  if (!premsStore.isEditBackwaterSetting) {
    toast.info("暂无权限");
    return;
  }
  let text = type == 1 ? "一键通过" : "一键拒绝";
  // 弹框操作
  showConfirmDialog({
    message: `是否进行【${text}】操作`,
    className: "confirm-dialog",
    beforeClose: async (action: string) => {
      return new Promise<boolean>(async resolve => {
        if (action === "confirm") {
          try {
            if (type == 1) {
              await reqUserBackWaterGrant({
                Id: 0,
                UserId: props.uid
              });
            } else {
              await reqUserBackWaterReject({
                Id: 0,
                UserId: props.uid
              });
            }
            search();
            resolve(true);
          } catch (error) {
            resolve(true);
          }
        } else {
          resolve(true);
        }
      });
    }
  });
};

defineExpose({
  open
});
</script>
